<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" th:href="@{/layui/Layui-KnifeZ/css/layui.css}"/>
		<link rel="stylesheet" type="text/css" th:href="@{/css/admin.css}"/>
		<link th:href="@{/lib/font-awesome/css/font-awesome.css}" rel="stylesheet" />
	</head>
	<body>
	<form class="layui-form column-content-detail" id="actAdd">
		<div class="layui-tab">
			<ul class="layui-tab-title">
				<li class="layui-this">添加文章</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<div class="layui-form-item">
						<label class="layui-form-label">文章标签：</label>
						<div class="layui-input-block">
							<select name="artLabel" lay-filter="status" id="artLabel">
								<option value="" selected disabled>请选择一个文章标签</option>
								<option th:each="biao,userStat:${remen_biaoqian}" th:value="${biao.dictdataValue}" th:text="${biao.dictdataName}"></option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">文章标题：</label>
						<div class="layui-input-block">
							<input type="text" id="artTitle" name="artTitle"  required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">文章描述：</label>
						<div class="layui-input-block">
							<input type="text" id="artDesc" name="artDesc"  required lay-verify="required" placeholder="请输入描述" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">文章内容：</label>
						<div class="layui-input-block">
							<textarea id="demo" name="content" lay-verify="content"  style="display: none;"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item" style="padding-left: 10px;">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-normal" type="submit">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<script th:src="@{/js/jquery-3.2.1.min.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/layui/Layui-KnifeZ/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/layui/ace/ace.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/js/common.js}" type="text/javascript" charset="utf-8"></script>
	<script>
			var index ;

            layui.use(['form', 'table', 'laydate', 'layer', 'laypage', 'dialog',  'tool', 'element', 'upload', 'layedit'], function() {
				var form = layui.form,
					layer = layui.layer,
                    table = layui.table,
					laypage = layui.laypage,
					laydate = layui.laydate,
					layedit = layui.layedit,
					tool = layui.tool,
					element = layui.element,
					dialog = layui.dialog;

				//获取当前iframe的name值
				var iframeObj = $(window.frameElement).attr('name');

            layedit.set({
                uploadImage: {
                    url: '/uploadImg' //接口url
                    ,type: 'post' //默认post
                },
                uploadVideo: {
                    url: 'your url',
                    accept: 'video',
                    acceptMime: 'video/*',
                    exts: 'mp4|flv|avi|rm|rmvb',
                    size: 1024 * 10 * 2,
                    done: function (data) {
                        console.log(data);
                    }
                }
                , uploadFiles: {
                    url: 'your url',
                    accept: 'file',
                    acceptMime: 'file/*',
                    size: '20480',
                    autoInsert: true , //自动插入编辑器设置
                    done: function (data) {
                        console.log(data);
                    }
                }
                //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
                //传递参数：
                //图片： imgpath --图片路径
                //视频： filepath --视频路径 imgpath --封面路径
                //附件： filepath --附件路径
                , calldel: {
                    url: 'your url',
                    done: function (data) {
                        console.log(data);
                    }
                }
                , rightBtn: {
                    type: "layBtn",//default|layBtn|custom  浏览器默认/layedit右键面板/自定义菜单 default和layBtn无需配置customEvent
                    customEvent: function (targetName, event) {
                        //根据tagName分类型设置
                        switch (targetName) {
                            case "img":
                                alert("this is img");
                                break;
                            default:
                                alert("hello world");
                                break;
                        };
                        //或者直接统一设定
                        //alert("all in one");
                    }
                }
                //测试参数
                , backDelImg: true
                //开发者模式 --默认为false
                , devmode: true
                //是否自动同步到textarea
                , autoSync: true
                //内容改变监听事件
                , onchange: function (content) {
                    console.log(content);
                }
                //插入代码设置 --hide:false 等同于不配置codeConfig
                , codeConfig: {
                    hide: true,  //是否隐藏编码语言选择框
                    default: 'javascript', //hide为true时的默认语言格式
                    encode: true //是否转义
                    ,class:'layui-code' //默认样式
                }
                //新增iframe外置样式和js
                , quote:{
                    style: ['Content/css.css'],
                    //js: ['/Content/Layui-KnifeZ/lay/modules/jquery.js']
                }
                //自定义样式-暂只支持video添加
                //, customTheme: {
                //    video: {
                //        title: ['原版', 'custom_1', 'custom_2']
                //        , content: ['', 'theme1', 'theme2']
                //        , preview: ['', '/images/prive.jpg', '/images/prive2.jpg']
                //    }
                //}
                //插入自定义链接
                , customlink:{
                    title: '插入layui官网'
                    , href: 'https://www.layui.com'
                    ,onmouseup:''
                }
                , facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/'
                , devmode: true
                , videoAttr: ' preload="none" '
                //预览样式设置，等同layer的offset和area规则，暂时只支持offset ,area两个参数
                //默认为 offset:['r'],area:['50%','100%']
                //, previewAttr: {
                //    offset: 'r'
                //    ,area:['50%','100%']
                //}
            });
            index = layedit.build('demo',{
                /*tool: [
                    'strong' //加粗
                    ,'italic' //斜体
                    ,'underline' //下划线
                    ,'del' //删除线
					,'code'
                    ,'|' //分割线
                    ,'left' //左对齐
                    ,'center' //居中对齐
                    ,'right' //右对齐
                    ,'link' //超链接
                    ,'unlink' //清除链接
                    ,'image' //插入图片
                    ,'help' //帮助
                ]*/
                tool: [
                    'html', 'undo', 'redo', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|','removeformat', 'fontFomatt', 'fontfamily','fontSize', 'fontBackColor', 'colorpicker', 'face'
                    , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'images', 'image_alt', 'video','attachment', 'anchors'
                    , '|'
                    , 'table','customlink'
                    , 'fullScreen','preview'
                ]
            }); //建立编辑器



		});

        $("#actAdd").bind("submit",function(){
            layui.layedit.sync(index);
           let artLabel = $('#artLabel').val();
            if(artLabel === "" || artLabel === undefined || artLabel === null){
                layer.msg("请选择文章类型！");
                return false;
            }
            let data = {
                artLabel:$('#artLabel').val(),
                content:$('#demo').val(),
                artTitle:$('#artTitle').val(),
                artLabelText: $("#artLabel").find("option:selected").text(),
                artDesc: $("#artDesc").val()
            };
            $.ajax({
                url: '/addText',
                data: data,
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data.data == true) {
                        layer.msg('添加成功');
                    } else {
                        layer.msg('添加失败，请刷新页面');
                    }
                    let index = parent.layer.getFrameIndex(window.name);
                    setTimeout(function () {
                        //先得到当前iframe层的索引
                        parent.layer.close(index);
                        parent.layui.table.reload('test', {page: {curr: 1}});
                    }, 3000)

                }
            });
            return false;
        });


	</script>
	</body>
</html>